<template>
  <div class="unit-wrap" ref="imageUnit">
    <slot name="btnCon" v-if="isChoosed"></slot>
    <slot name="imagePreview" v-if="isChoosed"></slot>
    <div
      class="bg"
      ref="unitImgBG"
      :class="[isChoosed ? 'active' : '']"
      :style="{ backgroundImage: `url(${logo})` }"
      @contextmenu.prevent="handleRightMenu"
      @mouseleave="removeRightMenu"
    >
      <right-menu
        v-if="path != '/dataEvaluate'"
        id="context-menu"
        ref="ctxMenu"
        class="right-menu"
        :style="{ top: clientY, left: clientX }"
      >
        <li @click.stop="contactTarget">关联目标</li>
      </right-menu>
    </div>
    <div class="tit ellipsis one-line-ellipsis">
      {{ fileName?fileName:'未命名' }}
    </div>
    <div class="time-con flex-center">
      <slot name="size"></slot>
      <!-- 审核状态 -->
      <slot name="checkStatus"></slot>
      <!-- 右键菜单  关联目标 -->
      <!-- <context-menu
        class="right-menu"
        :target="contextMenuTarget"
        :show="contextMenuVisible"
        @update:show="(show) => (contextMenuVisible = show)"
      >
        <a href="javascript:;" @click.stop="contactTarget">关联目标</a>
      </context-menu> -->
    </div>
  </div>
</template>

<script>
import rightMenu from "vue-context-menu";
export default {
  components: {
    rightMenu,
  },
  props: {
    isChoosed: {
      default: false,
    },
    fileName: {
      default: "",
    },
    logo: {
      default: "",
    },
    id: {
      default: "",
    },
  },
  data() {
    return {
      clientY: 0,
      clientX: 0,
      path: ''
    };
  },
  methods: {
    // 显示右键菜单
    handleRightMenu(e) {
      if (this.path != '/dataEvaluate') {
        this.clientX =
          e.clientX - this.$refs.unitImgBG.getBoundingClientRect().left + "PX";
        this.clientY =
          e.clientY - this.$refs.unitImgBG.getBoundingClientRect().top + "PX";
        this.$refs.ctxMenu.open();
      }
    },
    // 移除右键菜单
    removeRightMenu() {
      if (this.path != '/dataEvaluate') {
        this.$refs.ctxMenu.ctxVisible = false;
      }
    },
    contactTarget() {
      this.$emit("contactTarget", this.id);
    },
  },
  mounted() {
    this.path = this.$route.path;
  },
};
</script>

<style lang="scss" scoped>
.unit-wrap {
  border-radius: 0.1rem 0 0 0.1rem;
  margin-bottom: 0.1rem;
  width: 25%;
  padding-right: 0.6%;
  &:nth-child(4n) {
    padding-right: 0;
  }
  .bg {
    width: 100%;
    height: 19vh;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    border-radius: 0.1rem;
    &.active {
      border: 2px solid #1890ff;
    }
  }
  .tit {
    margin-top: 0.06rem;
    padding: 0.02rem 0;
    padding-left: 0.06rem;
    width: 100%;
    background: #1890ff;
    border-radius: 0.05rem;
    font-size: 0.16rem;
    color: #ffffff;
  }
  .time-con {
    font-size: 0.14rem;
    font-weight: 400;
    height: 0.3rem;
    line-height: 0.3rem;
    color: #aaaaaa;
  }
  ::v-deep .right-menu {
    position: absolute;
    cursor: pointer;
    border: none;
    ul {
      border-radius: 0.08rem;
      color: #ffffff;
      padding: 0.1rem 0;
      background: #0f2d43;
      width: 1.3rem;
      min-width: 1.3rem;
      font-size: 0.14rem;
      text-align: center;
    }
    li {
      text-align: center;
    }
    a {
      color: #ffffff;
    }
  }
}
</style>
